<template>
  <div class="Article">
    <el-skeleton style="" :loading="skeletonLoading" animated>
      <template #template>
        <el-skeleton-item
          variant="image"
          style="
            width: 2.5rem;
            height: 2rem;
            display: inline-block;
            vertical-align: top;
          "
        />
        <div
          style="
            padding: 0.1rem;
            display: inline-block;
            width: 4.5rem;
            vertical-align: top;
          "
        >
          <el-skeleton-item variant="h3" style="width: 50%" />

          <el-skeleton-item variant="text" style="" />
          <el-skeleton-item variant="text" style="" />
          <el-skeleton-item variant="text" style="" />
          <el-skeleton-item variant="text" style="" />
        </div>
      </template>
      <template #default>
        <div
          v-for="(item, index) in article_data"
          :key="index"
          class="a_item"
          @click="jump(item.id)"
        >
          <div class="a_item_left">
            <el-image
              class="a_item_left_img"
              :src="base + item.pjname"
              fit="fill"
              :lazy="true"
            ></el-image>
          </div>
          <div class="a_item_right">
            <div class="a_item_right_tit">
              {{ item.name }}
            </div>
            <div class="a_item_right_text">
              {{ item.fcon }}
            </div>
            <div class="a_item_right_info">
              <span class="el-icon-view"></span><span>{{ item.see }}</span
              ><span>{{ item.time }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>

    <div class="loading" v-show="showloading">
      <div>
        <span v-show="!loaded" class="el-icon-loading"></span
        >{{ loaded ? "已全部加载" : "加载中..." }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, Ref, onUnmounted, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Article",
  props: {
    article_data: Array,
    loaded: Boolean,
    skeletonLoading: Boolean,
  },
  setup(props: any, ctx) {
    function jl(fn: any, time: number) {
      let t: any = null;
      return function (...args: any[]) {
        clearTimeout(t);
        t = setTimeout(() => {
          fn.apply(this, args);
        }, time);
      };
    }
    let scrollload = jl(function () {
      let scrollTop = document.documentElement.scrollTop;
      let screeHeight = window.screen.height;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + screeHeight == scrollHeight) {
        ctx.emit("scrollLoaded");
      }
    }, 200);
    onMounted(() => {
      window.onscroll = () => {
        scrollload();
      };
      // getdata(1);
    });
    onUnmounted(() => {
      window.onscroll = null;
    });
    function jump(id: string) {
      ctx.emit("clickItem", id);
      // router.push(`/des?id=${parseInt(id)}&type=${props.type}`);
    }
  },
});
</script>
<style lang="scss" scoped>
.Article {
  background-color: white;
  // margin-top: 0.1rem;
  padding: 0.2rem 0.2rem;
  // padding-bottom: 50px;
  .a_item {
    display: flex;
    margin: 0.1rem 0;
    color: #a39b9b;
    padding: 0.2rem;
    border-radius: 12px;
    background-color: white;
    border: 1px solid rgb(235, 231, 231);
    box-shadow: 5px 5px 3px darkgray;
  }
  .a_item:nth-child(1) {
    margin: 0;
  }
  .a_item_left {
    .a_item_left_img {
      width: 2.5rem;
      height: 2rem;
      border-radius: 12px;
      box-shadow: 5px 5px 3px darkgray;
    }
  }
  .a_item_right {
    flex: 1;
    padding-left: 0.2rem;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    .a_item_right_tit {
      color: black;
      font-size: 0.3rem;
      margin-bottom: 0.1rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .a_item_right_text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-height: 0.4rem;
      -webkit-box-orient: vertical;
      margin-bottom: 0.1rem;
    }
    .a_item_right_info {
      margin-top: 0.1rem;
      position: absolute;
      bottom: 0rem;
      right: 0.1rem;
      span {
        font-size: 0.2rem;
        color: #adb4bb;
      }
      span:nth-child(1) {
        color: #409eff;
        margin-right: 0.1rem;
      }
      span:nth-child(2) {
        color: #409eff;
        margin-right: 0.2rem;
      }
    }
  }
  .loading {
    // position: fixed;
    // bottom: 0;
    // left: 0;
    // right: 0;
    // width: 100%;
    div {
      text-align: center;
      height: 40px;
      line-height: 40px;
      // background-color: black;
      color: adb4bb;
      span {
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
